@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: {!! $lists !!},
                    finished: false,//是否已加载完成，加载完成后不再触发load事件
                    loading: false,//加载loading开关
                    params: {page : 2},
                }
            },
            created(){
                this.listData = this.pageData.data;
            },
            methods: {
                list() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.column.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            if((that.pageData.last_page == 1) || (that.params.page == that.pageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                info(id) {
                    window.location.href = "{{ route('wap.column.info') }}"+'?id='+id;
                },
            }
        });
    </script>
@endsection
@section('content')
    @include('wap.layout.header')
    <div class="container main" style="background: #fff">
        <div class="row">
            <div class="col-xs-12">
                <div class="column">
                    <p class="column-t">专栏作者</p>
                    <p>区块链行业最有思想的 KOL 聚集地，600+ 作者深度思想引领区块链理论高地</p>
                </div>
            </div>
            <div id="app" v-cloak>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="list">
                    <div class="col-xs-12" v-for="items in listData"  @click="info(items.id)">
                        <div class="column-item">
                            <div class="column-item-info">
                                <div class="item-info-avatar">
                                    <img :src="items.avatar" alt="">
                                </div>
                                <div class="item-info-go">
                                    <p class="item-info-name"> @{{ items.truename }}</p>
                                    <table>
                                        <tr class="table-title">
                                            <td>文章数 @{{ items.total_news }}</td>
                                            <td>浏览量 @{{ items.total_views }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="column-item-note">作者简介：@{{ items.introduce ? items.introduce : '这个家伙很懒，什么也没留下' }}</div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
    @include('wap.layout.footer')
@endsection

